<template>
    <div class="calendar-month">
        <i class="iconfont iconzuo" @click="checkLastMonth"></i>
        <div class="year-month flex ac">
            <!-- {{ year }}年{{ month.toString().padStart(2, 0) }}月 -->
            {{ time | dateFilter("yyyy年MM月") }}
            <slot>
                <!-- 考勤 <gg-dot-state ggclass="mg_l10" :state="2">进行中</gg-dot-state> -->
            </slot>
        </div>
        <i class="iconfont iconyou" @click="checkNextMonth"></i>
    </div>
</template>

<script>
let date = new Date();
import { dateFilter as filter } from "../ways/filter.js";
export default {
    name: "qg-cut-month",
    props: {
        value: {
            type: [String, Date],
            default: "",
        },
    },
    data() {
        return {
            month: date.getMonth() + 1,
            year: date.getFullYear(),
            time: date,
        };
    },
    watch: {
        value: {
            handler(n) {
                if (!n) return;
                this.time = filter(n, "yyyy-MM");
            },
            immediate: true,
        },
    },
    methods: {
        checkLastMonth() {
            if (this.month <= 1) {
                this.month = 12;
                this.year -= 1;
            } else {
                this.month -= 1;
            }
            let params = {
                startTime: this.year + "-" + this.month + "-" + "01",
                endTime: this.year + "-" + this.month + "-" + new Date(this.year, this.month, 0).getDate(),
            };
            this.$emit("input", params.startTime);
            this.$emit("last", params, this.month);
        },
        checkNextMonth() {
            if (this.month >= 12) {
                this.month = 1;
                this.year += 1;
            } else {
                this.month += 1;
            }
            let params = {
                startTime: this.year + "-" + this.month + "-" + "01",
                endTime: this.year + "-" + this.month + "-" + new Date(this.year, this.month, 0).getDate(),
            };
            this.$emit("input", params.startTime);
            this.$emit("next", params, this.month);
        },
    },
};
</script>

<style scoped>
.calendar-month {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.year-month {
    font-size: 16rem;
}
</style>
